<template>
  <div>
    <table border="1">
      <thead>
      <tr>
        <th>员工名</th>
        <th>员工性别</th>
        <th>员工年龄</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="e in emps" >
        <td>{{e.ename}}</td>
        <td>{{e.esex}}</td>
        <td>{{e.age}}</td>
      </tr>
      </tbody>
    </table>
    <!--    {{xx}}-->
    <!--    <input type="text" v-model="xx">-->
  </div>
</template>

<script>
  export default {
    name: "ShowTable",
    data() {
      return {
        emps: [],
        xx: ""
      }
    },
    methods: {
      update: function (emp) {
        console.log(this.index)//1
        // 使用父组件传输进来的index作为下标 ,给数组追加新的对象数据
        this.emps[this.index]=emp;
        // 强制页面刷新,注意::页面会刷新,所以记录下标index不能再这个组件中定义否则会被刷新
        this.$forceUpdate();
      }
    },
    watch: {  //侦听器 -> 监听器 专门数据data里面的属性的编号
      emp: function () { //监听父组件传递进来的emp数据是否有变化
        console.log("emp数据改变了");
        console.log(this.emp);
        //数据有变化及接受到了父组件传输进来的emp对象数据,调用函数新增数据
        this.update(this.emp);
        // this.emps[this.index++] = this.emp;
      }
    }
    , props: {
      emp: {
        type: Object
      },
      index:Number
    }
  }
</script>

<style scoped>

</style>
